<template>
	<div class="login">
		<!-- 右侧账户登录 -->
		<div class="right">
			<div class="card">
				<div class="title">
					重置密码
				</div>
				<div class="tabs">
					<div class="active">
						手机号
					</div>
					<div>
						邮箱
					</div>
					<!-- 蓝色背景 -->
					<div class="blue_"></div>
				</div>
				<template v-if="isTell">
					<el-form label-position="top" :model="formData" ref="formRules" :rules="rules">
						<el-form-item prop="tell">
							<div class="row_ w-100%">
								<p>手机号</p>
								<div class="row_flex">
									<el-dropdown>
										<el-button type="primary" color="#fff" class="btn-tell">
											+86
											<el-icon class="el-icon--right">
												<arrow-down />
											</el-icon>
										</el-button>
										<template #dropdown>
											<el-dropdown-menu>
												<el-dropdown-item>Action 1</el-dropdown-item>
												<el-dropdown-item>Action 2</el-dropdown-item>
												<el-dropdown-item>Action 3</el-dropdown-item>
												<el-dropdown-item>Action 4</el-dropdown-item>
												<el-dropdown-item>Action 5</el-dropdown-item>
											</el-dropdown-menu>
										</template>
									</el-dropdown>
									<el-input placeholder="请输入手机号" v-model="formData.tell" class="input_" />
								</div>
							</div>
						</el-form-item>
						<el-form-item prop="captcha">
							<template #default>
								<p class="label-title">验证码</p>
								<el-input class="h-58px " style="font-size: 18px;" v-model="formData.captcha"
								placeholder="请输入验证码"/>
								<div class="check-code" @click="checkCodeClick">
									{{ checkCodeSend }}
								</div>
							</template>
						</el-form-item>
					</el-form>
				</template>
				<template v-else>
				</template>
				<div class="made">
					<el-checkbox v-model="checkedTrue"></el-checkbox>
					<p>
						<span>在修改登录密码后的24小时内，如使用其他设备登录
							此账号，将暂时无法提现</span>
					</p>
				</div>
				<div>
					<el-button class="btn" type="primary" color="#114CEE" @click="submitClick(formRules)">确定</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue';
import type { FormInstance } from 'element-plus';


const formRules = ref<FormInstance>();
const isTell = ref<boolean>(true);
const checkedTrue = ref<boolean>(false);

interface IFormData {
	tell: string;
	captcha: string;
}

const formData = ref<IFormData>({
	tell: '',
	captcha: ''
})

// 验证码发送，一分钟内不能重复发送
const checkCodeSend = ref<string>('发送验证码');
const sendTime = ref<number>(60);
// 点击发送验证码
const checkCodeClick = () => {
	if (sendTime.value > 0 && sendTime.value !== 60) {
		return;
	} else {
		sendTime.value = 60;
		checkCodeSend.value = `${sendTime.value}s后重新发送`;
		const timer = setInterval(() => {
			sendTime.value--;
			checkCodeSend.value = `${sendTime.value}s后重新发送`;
			if (sendTime.value === 0) {
				clearInterval(timer);
				checkCodeSend.value = '发送验证码';
			}
		}, 1 * 1000);
	}
}

// 检验规则
const rules = {
	tell: [
		{ required: true, message: '请输入手机号', trigger: 'blur' },
		{ min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur' }
	],
	captcha: [
		{ required: true, message: '请输入验证码', trigger: 'blur' },
		{ min: 6, max: 6, message: '请输入验证码', trigger: 'blur' }
	]
}

// 按钮提交
const submitClick = (formEl: FormInstance | undefined) => {
	console.log(formEl);
	if (!formEl) return;
	// 验证
	formEl.validate((valid: boolean): any=> {
		if (valid) {
			console.log('submit!');
		} else {
			console.log('error submit!!');
			return false;
		}
	});
}


</script>
<style scoped lang="scss">

::v-deep .el-checkbox:last-of-type{
	margin-right: 10px;
	height: 22px;
}

.login {
	display: flex;
	align-items: center;
	padding: 5vh 0;

	>div {
		width: 30%;
	}

	.right {
		.card {
			box-sizing: border-box;
			width: 25vw;
			padding: 30px;
			background: #FFF;
			border: 1px solid #E5E6EB;
			border-radius: 16px;

			>div {
				margin: 20px 0;
			}

			.title {
				margin: 30px 0;
				font-family: "Microsoft YaHei", "Microsoft YaHei";
				font-size: 34px;
				font-weight: bold;
				color: #000;
			}

			.tabs {
				position: relative;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-around;
				width: 176px;
				height: 38px;
				padding: 0 10px;
				background: #FFF;
				border: 1px solid #E5E6EB;
				border-radius: 8px;

				>div {
					z-index: 100;
					font-family: "Microsoft YaHei", "Microsoft YaHei";
					font-size: 14px;
					font-weight: 400;
					color: #000;
				}

				.active {
					color: #fff;
				}

				.blue_ {
					position: absolute;
					top: 5%;
					left: 4px;
					z-index: 50;
					width: 56%;
					height: 90%;
					background-color: #114CEE;
					border-radius: 8px;

				}
			}

			.row_ {
				>p {
					margin-bottom: 10px;
					font-family: "Microsoft YaHei", "Microsoft YaHei";
					font-size: 14px;
					font-weight: 400;
					color: #86909C;
				}

				.btn-tell {
					flex: 3;
					height: 58px;
					border: 1px solid #E5E6EB;
					border-radius: 8px;
				}

				.input_ {
					flex: 10;
					height: 58px;
					margin-left: 10px;
					font-size: 18px;
				}

				.row_flex {
					display: flex;
				}
			}

			.made {
				display: flex;
				justify-content: space-between;
				font-family: "Microsoft YaHei", "Microsoft YaHei";
				font-size: 14px;
				font-weight: 400;
				color: #86909C;
				align-items: start;
				.blue-font {
					cursor: pointer;
					color: #114CEE;
				}
			}

			.btn {
				width: 100%;
				height: 50px;
				font-family: "Microsoft YaHei", "Microsoft YaHei";
				font-size: 18px;
				font-weight: 400;
				color: #FFF;
			}

			.bottom {
				font-family: "Microsoft YaHei", "Microsoft YaHei";
				font-size: 14px;
				font-weight: 400;
				color: #86909C;

				>a {
					color: #000;
					text-decoration: none;

					&:hover,
					&:active,
					&:focus {
						color: inherit;
						text-decoration: none;
					}
				}
			}
		}
	}

	.label-title {
		font-family: Microsoft YaHei, Microsoft YaHei;
		font-weight: 400;
		font-size: 14px;
		color: #86909C;
	}

	.check-code {
		position: absolute;
		right: 20px;
		bottom: 0;
		line-height: 58px;
		font-family: Microsoft YaHei, Microsoft YaHei;
		font-weight: 400;
		font-size: 18px;
		cursor: pointer;
		color: #000000;
	}
}
</style>
